<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>GT pro钱包</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
		<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
		<link rel="stylesheet" href="css/card.css">
		<link rel="stylesheet" href="css/fr_style.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
		<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
		<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
	</head>

	<body class="hold-transition skin-blue sidebar-mini">
		<div class="wrapper">

			<div class="content-wrapper">
				<section class="content-header ">
					<ol class="breadcrumb">
						<li>
							<a href="#"><i class="fa fa-dashboard"></i>云算力管理</a>
						</li>
						<li class="active">下级算力查询</li>
					</ol>
				</section>
				<section class="content">
					<div class="box">
						<div class="box-header with-border">
							下级算力查询
						</div>
						<div class="buyu_search_group">
							<div class="row" style="margin-bottom:10px;">
								<div class="col-xs-12 col-sm-6 col-lg-3">
									<div class="input-group margin">
										<div class="input-group-btn">
											<button type="button" class="btn btn-default" aria-expanded="false">用户id</button>
										</div>
										<input type="text" class="form-control" id="user_id">
									</div>
								</div>
								<div class="col-xs-12 col-sm-6 col-lg-3">
									<div class="input-group margin">
										<div class="input-group-btn">
											<button type="button" class="btn btn-default" aria-expanded="false">统计时间</button>
										</div>
										<!-- /btn-group -->
										<input type="text" class="form-control" id="select_time" autocomplete="off">
										<div class="input-group-addon clearBtns" onclick="clearRangeTime(this)">x</div>
									</div>
								</div>
								<div class="col-xs-12 col-sm-6 col-lg-3">
									<button type="button" class="btn bg-primary margin" onclick="getData()"><i class="fa fa-search" ></i>&nbsp;搜索</button>
								</div>
							</div>
							
						</div>
						<div class="row">
							<div class="col-xs-12">
								<div id="relationChart" style="width: 100%;height:500px">
									
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="dist/js/adminlte.min.js"></script>
		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

		<script src="bower_components/moment/min/moment.min.js"></script>
		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
		<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

		<script src="js/echarts.min.js"></script>

		<script src="js/argument.js"></script>
		<script src="js/fun.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/pop.js"></script>
		<script src="js/getList.js"></script>
		<script type="text/javascript">
		</script>
		<script type="text/javascript">
			$('#select_time').daterangepicker({
				autoUpdateInput: false,
				locale: {
					format: "YYYY-MM-DD"
				}
			})
			var myChart = echarts.init(document.getElementById('relationChart'));
			var data ={},i=0;
			function getData(){
				if($("#user_id").val() === ""){
					alert('请输入用户id!')
					return
				}
				myChart.showLoading()
				var data ={
					user_id: $("#user_id").val(),
				}
				if($("#select_time").val()){
					data.start_time = $("#select_time").val().substring(0, 10),
					data.end_time  = $("#select_time").val().substring(13, 23);
				}
				
					console.log()
				$.ajax({
					"type": 'post',
					"url": url + "Back_UserPowerByInvite",
					"contentType": "application/x-www-form-urlencoded",
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					'data': {
						data: JSON.stringify(data)
					},
					'success': function(res) {
						myChart.hideLoading();
						if(res.status == 1000||res.status == 102) {
							ToLogin(res)
							return false;
						} else if(res.status != 1) {
							alert(res.error);
							return false;
						}
						data = res.data;
						dataEach(res.data);
						heightChange();
						data.value = data.power
						renderData(data.children)
						// var option = setOption(renderData(data));
						var option = setOption(data);
						
						myChart.clear()
						myChart.setOption(option);
						$.each(res.data.data_list, function(index, item) {
							$("#balanceDetailsModal [name = chain_id]").append('<option value=' + item.id + '>' + item.name + '</option>')
						})
					}
				})
			}
			function setOption(data){
				console.log(data)
				return {
				    tooltip: {
				        trigger: 'item',
				        triggerOn: 'mousemove',
						formatter : function(params){  
							var res='<div><p>用户ID：'+params.name+'</p><p>用户算力：'+params.value+'</p></div>'
							return res;
						}
				    },
				    series:[
				        {
				            type: 'tree',
				
				            name: 'tree1',
				
				            data: [data],
				
				            top: '5%',
				            left: '15%',
				            bottom: '2%',
				            right: '15%',
				
				            symbolSize: 10,
				
				            label: {
				                position: 'left',
				                verticalAlign: 'middle',
				                align: 'right',
								normal: {
									position: 'left',
									verticalAlign: 'middle',
									align: 'right',
									formatter: function (param) {
										console.log(param)
										
										if(param.value!=0){
											return param.name+'{a| - ['+param.value+']}'
										}else{
											return param.name
										}
										// if (param.name.match('Tra')) {
										// 	return '{a|' + param.name + '}'
										// } else {
										// 	return param.name;
										// }
									},
									rich: {
										a: {
											fontSize:10,
											color: 'red',
										}
									}
								},
				            },
				
				            leaves: {
				                label: {
				                    position: 'right',
				                    verticalAlign: 'middle',
				                    align: 'left'
				                }
				            },
				
				            expandAndCollapse: true,
							roam: true,  // 缩放
				            animationDuration: 550,
				            animationDurationUpdate: 750
				
				        }
				    ]
				}
			}
			
			// function renderData(jsonData){
			// 	var data={name:$("#user_id").val(),children:[]}
			// 	$.each(jsonData,function(index,item){
			// 		data.children.push({'name':item.user_id ,'children':[],'value':item.power})
			// 	})
			// 	return data
			// }	
			function renderData(data){
				$.each(data,function(index,item){
					item.value = item.power
					// item.name = item.name +"-["+item.power+"]"
					if(item.children.length !=0 ){
						renderData(item.children)
					}
				})
			}
			
			function heightChange(){
				var height = i>20 ? 500 + (i-20)*20:500
				$("#relationChart").css("height",height+'px')
				myChart.resize();
			}
			
			$(".sidebar-menu").find("li[code = 1]").addClass("active")
			
			function dataEach(data){
				console.log(data.children)
				i = 0
				$.each(data.children,function(index,item){
					i += item.children.length !=0?item.children.length : 1 ;
				})
				console.log(i)
			}
			
			myChart.on('click', function(params) {
				var name = params.data.name;//点击的节点的name
				var value = params.data.value;//点击的节点的value
				//调用点击事件
				clickNode(name,value);
			});
			function clickNode(name,value){
				$("#user_id").val(name)
				// alert(name+'--的值：'+value);
			}
		</script>
	</body>

</html>